<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>忘记密码</title>
    <link rel="stylesheet" href="static/bootstrap/dist/css/bootstrap.min.css">
    <script src="static/axios/axios.min.js"></script>
    <style>
        body {
            height: 100vh;
            background-image: url("static/images/bg.jpg");
            background-size: cover;
        }

        .card {
            width: 20rem;
            background-color: rgb(232, 229, 240);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .text-success {
            color: green;
        }

        .text-danger {
            color: red;
        }
    </style>
</head>

<body>
<div class="card shadow-lg">
    <div class="card-body">
        <h5 class="card-title mb-3 text-center">忘记密码</h5>
        <form>
            <div class="form-group mb-3">
                <label>邮件</label>
                <input name="email" type="email" id="email" class="form-control" placeholder="请输入邮件地址">
                <small id="emailHelp" class="form-text text-muted" hidden>邮箱格式不正确</small>
            </div>
            <div class="form-group mb-3">
                <label>密码</label>
                <input name="password" type="password" id="password" class="form-control" placeholder="请输入密码">
                <small id="pwdHelp" class="form-text text-muted" hidden>密码长度必须大于等于6位</small>
            </div>
            <div class="form-group mb-3">
                <label>重复密码</label>
                <input name="repeat-password" type="password" id="repeat-password" class="form-control" placeholder="请再次输入密码">
                <small id="repeatPwdHelp" class="form-text text-danger" hidden>两次密码输入不一致</small>
            </div>

            <button type="submit" id="submit" class="btn btn-primary w-100 mb-3">确认修改</button>
        </form>
    </div>
</div>
</body>
<script>
    const email = document.getElementById('email');
    const password = document.getElementById('password');
    const repeatPassword = document.getElementById('repeat-password');
    const submit = document.getElementById('submit');
    const emailHelp = document.getElementById('emailHelp');
    const pwdHelp = document.getElementById('pwdHelp');
    const repeatPwdHelp = document.getElementById('repeatPwdHelp');

    function tip(element, message, visible, status) {
        element.innerHTML = message;
        element.hidden = !visible;
        element.className = 'form-text ' + status;
    }

    function checkParams() {
        const emailValue = email.value.trim();
        const passwordValue = password.value.trim();
        const repeatPasswordValue = repeatPassword.value.trim();

        let flag = true;

        // 邮箱验证：标准邮箱格式
        if (!/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(emailValue)) {
            tip(emailHelp, '邮箱格式不正确', true, 'text-danger');
            flag = false;
        } else {
            tip(emailHelp, '邮箱格式正确', true, 'text-success');
        }

        // 密码验证：长度大于等于6
        if (passwordValue.length < 6) {
            tip(pwdHelp, '密码长度必须大于等于6位', true, 'text-danger');
            flag = false;
        } else {
            tip(pwdHelp, '', true, 'text-muted');
        }

        // 重复密码验证
        if (passwordValue !== repeatPasswordValue) {
            tip(repeatPwdHelp, '两次密码输入不一致', true, 'text-danger');
            flag = false;
        } else {
            tip(repeatPwdHelp, '', true, 'text-muted');
        }

        return flag;
    }

    submit.addEventListener('click', (event) => {
        event.preventDefault();

        if (!checkParams()) {
            return; // 如果验证失败，不发送请求
        }

        const url = 'http://localhost:8080/forget';
        var params = new URLSearchParams();
        params.append('email', email.value);
        params.append('password', password.value);

        axios.post(url, params)
            .then(response => {

                if (response.data.status === "success") {
                    alert(response.data.message);
                    console.log(response.data)
                    window.location.href = '/login.html';
                } else {
                    if (response.data.error === "email") {
                        tip(emailHelp, response.data.message, true, "text-danger")
                    } else {
                        tip(emailHelp, "未知类型错误", true, "text-danger")
                    }
                }
            })
            .catch(error => {
                alert('密码修改失败，请检查邮箱是否正确');
            });
    });
</script>
</html>